<template>
	<view>
		<view class="container">
			<view class="nav">
				<image @click="goBack()" src="/static/tell_left.png" mode=""></image>
				<view class="title">托管</view>
			</view>
			<view class="quest_head">
				<view class="head_item" @click="nav_click(index,item.id)" :class="navIndex == index ? 'head_act' : ''"
					v-for="(item,index) in navList" :key="index">
					{{item.name}}
				</view>
			</view>
			<view class="search_box">
				<view class="search">
					<view class="search_l">
						<image src="/static/tg_search.png" mode=""></image>
					</view>
					<input type="text" @input="search" placeholder="搜索需要的商品" />
				</view>
			</view>
			<view class="text_list">
				<view class="text_item" @click="toggle('right')">品牌/类别</view>
				<view @click="click_active(1)" :class="active == 1 ? 'text_item h3_act' : 'text_item'">新品</view>
				<view @click="click_active(2)" :class="active == 2 ? 'text_item h3_act' : 'text_item'">收益</view>
				<view @click="click_active(3)" :class="active == 3 ? 'text_item h3_act' : 'text_item'">急缺</view>
			</view>
			<view class="cont">
				<view class="cont_item" v-for="(item,index) in good_list">
					<image @click="$utils.navigateTo('tuoguan/detail',{ id: item.id })" :src="item.photo" mode="">
					</image>
					<view class="title">{{item.title}}</view>
					<view class="foot">
						<view class="foot_l">
							<text>预估：</text>
							<view class="money">￥{{item.shouyi}}元/3天</view>
						</view>
						<!-- <text>余 0</text> -->
						<text style="color: #8bc9fa;" @click="$utils.navigateTo('tuoguan/apply',{ id: item.id })">去托管</text>
					</view>
				</view>
			</view>
			<!-- <view class="fixed_btn"  @click="goTo('tuoguan/apply')">自有设备去托管</view> -->

		</view>

		<uni-popup ref="popup" background-color="#fff" @change="change">


			<view class="popup-content" style="margin: 16% 0;width: 500rpx;">
				<view style="width: 90%;margin: auto;">
					<view>
						<view>
							品牌
						</view>
						<view style="margin-top: 6%;">
						<!-- 		<view class="tabjki" style="" v-for="item in brand_list">
												佳能
											</view> -->

					<uni-data-checkbox  mode="tag"  multiple   v-model="value2" :localdata="brandlist" :map="map" @change="changepin"></uni-data-checkbox>

						</view>
					</view>
				<view style="margin-top: 5%;border-top: 2px solid #ddd;padding-top: 5%;">
					<view>
						分类
					</view>
					<view style="margin-top: 6%;">
					<!-- 		<view class="tabjki" style="" v-for="item in brand_list">
											佳能
										</view> -->
				
				<uni-data-checkbox  mode="tag"  multiple   v-model="value3" :localdata="catelist" :map="map2" @change="changefenlei"></uni-data-checkbox>
				
					</view>
				</view>
				</view>
<view style="display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 0px;
    right: 0%;
    width: 100%;
    height: 50px;">
	<view class="sure" style="background-color: #5196fe;" @click="sure">确定</view>
	<view class="sure" style="background-color: #dddddd;"  @click="quxiao">取消</view>
</view>
			</view>

		</uni-popup>



		<!-- 		<uni-popup ref="popup" type="right" style="width: 100%;" :mask-click="true">
			<view style="background-color: #fff;height: 100vh;padding: 10%;">
				<view>
					<view>
						品牌
					</view>
					<view style="background-color: #f1f1f1;padding: 5px;" v-for="item in 5">
						佳能
					</view>
				</view>
				<view>
					<view>
						分类
					</view>
				</view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
	import DyCategoryGanged from '@/components/dy-category-ganged'
	export default {
		components: {
			DyCategoryGanged
		},
		data() {
			return {
				title: '',
			
				type: '',
				value: null,
				value2: 0,
				value3: 0,
				value1: [],
				catelist: [],
				map: {
					text: 'name',
					value: 'id'
				},map2: {
					text: 'title',
					value: 'id'
				},
				dyCategoryGangedData: [],
				brandlist: [{
					text: 'name',
					value: 'id'
				}],
				options: {
					typeTitle: "typeTitle",
					minTypeTitle: "minTypeTitle",
					childrens: "childrens",
					content: "content",
				},
				navList: ['上海', '北京', '广州', '杭州', '深圳'],
				navIndex: 0,
				cid: 0,
				bid: 0,
				city_id: 0,
				good_list: [],
				active: 0
			}
		},
		onShow() {
			this.onLoadData();
			this.onLoadData(this.cid, this.bid, this.city_id, this.is_new, this.is_ji, this.shouyi, this.title);
		},
		onLoad() {
			let _self = this;
			setTimeout(() => {
				// 模拟数据
				for (let i = 0; i < 40; i++) {
					_self.dyCategoryGangedData.push({
						typeTitle: '分类' + i,
						minTypeTitle: '这是一个小分类' + i,
						childrens: []
					});
					let num = parseInt(Math.random() * 10 + 1);
					for (let j = 0; j < num; j++) {
						_self.dyCategoryGangedData[i].childrens.push({
							content: 'content' + i + j
						});
					}
				}
			}, 50)
		},
		methods: {
			search(e){
				this.title = e.detail.value
				this.onLoadData(this.cid, this.bid, this.city_id, this.is_new, this.is_ji, this.shouyi, this.title);
			},
			changefenlei(e){
					this.cid = e.detail.value.join("")
			},
			changepin(e){
				this.bid = e.detail.value.join("")
			},
			sure(id){
					this.onLoadData(this.cid, this.bid, this.city_id, this.is_new, this.is_ji, this.shouyi, this.title);
				this.$refs.popup.close()
			},
			quxiao(){
				this.bid = ''
				this.cid = ''
					this.$refs.popup.close()
					this.onLoadData()
			},
			change() {

			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			close() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			confirm(value) {
				// 输入框的值
				console.log(value)
				// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			onLoadData(cid, bid, city_id, is_new, is_ji, shouyi, title) {
				
				this.$http.getTuoguanGoodList({
					cid: cid,
					bid: bid,
					city_id: this.city_id,
					is_new: is_new,
					shouyi: shouyi,
					is_ji: is_ji,
					title: title
				}).then((result) => {
					if (result.status) {
						this.navList = result.data.city_list;
						this.good_list = result.data.good_list;
						this.brandlist = result.data.brand_list;
						this.catelist = result.data.cate_list;
						console.log(this.brandlist, 'this.brand_lis')

					}
				}).catch(err => {

				});
			},
			nav_click(i, city_id) {
				this.navIndex = i;
				this.city_id = city_id;
				this.is_new = 0;
				this.is_ji = 0;
				this.active = 0;
				this.shouyi = 0;
				this.onLoadData(0, 0, city_id);
			},
			click_active(i) {
				console.log(i);
				this.active = i;
				if (i == 1) {
					this.is_new = 1;
					this.is_ji = 0;
					this.shouyi = 0;
				} else if (i == 2) {
					this.is_new = 0;
					this.shouyi = 1;
					this.is_ji = 0;
				} else if (i == 3) {
					this.is_new = 0;
					this.shouyi = 0;
					this.is_ji = 1;
				} else {
					this.is_new = 0;
					this.is_ji = 0;
					this.shouyi = 0;
				}
				this.onLoadData(this.cid, this.bid, this.city_id, this.is_new, this.is_ji, this.shouyi, this.title);
			}

		}
	}
</script>

<style scoped lang="scss">
	.sure{
		display: flex;
		align-items: center;
		flex:1;
		justify-content: center;
		color: #fff;
	}
	.tabjki {
		background-color: #f1f1f1;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 5%;
	}

	.popup-height {
		// width: 200px;
	}

	.container {
		min-height: 100vh;
		// padding: 32rpx 32rpx 200rpx 32rpx;
		padding: 32rpx;
		width: calc(100% - 64rpx);
		background: linear-gradient(181deg, #BBE0FC 0%, #78C0F9 8%, #ACDCF4 15%, rgba(209, 240, 241, 0.9846) 19%, rgba(209, 240, 241, 0) 100%);

		.nav {
			display: flex;
			align-items: center;
			position: fixed;
			width: calc(100% - 64rpx);

			image {
				width: 42rpx;
				height: 47rpx;
			}

			.title {
				margin-left: -42rpx;
				flex: 1;
				font-weight: 400;
				font-size: 36rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}

		.quest_head {
			margin-top: 60rpx;
			display: flex;
			align-items: center;
			// justify-content: space-between;
			overflow: auto;
			font-weight: 400;
			padding-bottom: 10rpx;

			.head_item {
				font-size: 24rpx;
				color: #666666;
				position: relative;
				margin-right: 5%;
			}

			.head_act {
				font-size: 32rpx;
				color: #333333;
			}

			.head_act::after {
				content: '';
				position: absolute;
				left: calc(50% - 30rpx);
				bottom: -10rpx;
				width: 60rpx;
				height: 4rpx;
				background: #3B76FF;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
			}
		}

		.search_box {
			margin-top: 24rpx;

			// padding: 0 30rpx;
			.search {
				height: 60rpx;
				background: rgba(255, 255, 255, 0.5);
				border-radius: 123rpx 123rpx 123rpx 123rpx;
				border: 2rpx solid #FFFFFF;
				display: flex;
				align-items: center;

				.search_l {
					width: 117rpx;
					height: 60rpx;
					background: rgba(255, 255, 255, 0.5);
					border-radius: 123rpx 123rpx 123rpx 123rpx;
					border: 2rpx solid #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 42rpx;
						height: 42rpx;
					}
				}

				input,
				.input_class {
					text-indent: 15rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					height: 60rpx;
					outline: none;
					border: none;
				}
			}
		}

		.text_list {
			margin-top: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.text_item {
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
			}

			.h3_act {
				color: #55B6EA;
			}
		}

		.cont {
			margin-top: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;

			.cont_item {
				margin-bottom: 24rpx;
				width: 42%;
				padding: 20rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(141, 191, 252, 0.5);
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				image {
					width: 258rpx;
					height: 258rpx;
				}

				.title {
					margin-top: 5rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #3D3D3D;
					overflow: hidden;
					text-overflow: ellipsis;
					text-wrap: wrap;
					white-space: normal;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}

				.foot {
					margin-top: 10rpx;
					display: flex;
					flex-direction: column;
					// align-items: center;
					// justify-content: space-between;

					text {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						text-align: center;
						margin-top: 2%;
					}

					.foot_l {
						display: flex;
						align-items: center;

						.money {
							font-weight: 600;
							font-size: 24rpx;
							color: #333333;
						}
					}
				}
			}
		}

		.fixed_btn {
			width: 400rpx;
			height: 100rpx;
			background: linear-gradient(116deg, #F2EBFF 0%, #D1F0F1 100%);
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(141, 191, 252, 0.5);
			border-radius: 120rpx 120rpx 120rpx 120rpx;
			border: 1rpx solid #3B76FF;
			font-weight: 400;
			font-size: 36rpx;
			color: #3B76FF;
			text-align: center;
			line-height: 100rpx;
			position: fixed;
			bottom: 200rpx;
			left: 50%;
			transform: translate(-50%, 0);
		}





	}
</style>